<template>
	<view class='bgClass'>
		<navigation-custom title="我的"></navigation-custom>
		<view class="avatarBox allBox" @click="clickUserInfo">
			<image :src="avatarHandler(userInfo)" mode="aspectFill"></image>
			<view class="userInfoBox">
				<!-- 			<view class="userip">
					<text class="iptext">{{ipInfo.ip}}</text>
					<uni-tag :inverted="true" custom-style="border-color: #13C4A3; background-color: #13C4A3; color: #fff; font-size: 26rpx" :text="ipInfo.prov || ipInfo.country" />
				</view> -->
				<!-- #ifdef MP-WEIXIN -->
				<text v-if="hasLogin" class="usernameText">{{userInfo.nickname||userInfo.username||'微信用户'}}</text>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<text v-if="hasLogin" class="usernameText">{{userInfo.nickname||userInfo.username}}</text>
				<!-- #endif -->

				<text v-else class="usernameText">登录 / 注册</text>

			</view>
		</view>
		<view class="memuList allBox">
			<navigator url="/pages/myCacheList/myCacheList?type=collectInfo_" class="memuItem">
				<image src="@/static/icon/collect.png" mode="aspectFill"></image>
				<text>壁纸收藏</text>
				<text class="memuItem-count">{{collectCount}}个</text>
			</navigator>
			<navigator url="/pages/myCacheList/myCacheList?type=downloadInfo_" class="memuItem">
				<image src="@/static/icon/download.png" mode="aspectFill"></image>
				<text>下载记录</text>
				<text class="memuItem-count">{{downloadCount}}个</text>

			</navigator>
			<navigator url="/pages/myCacheList/myCacheList?type=historyInfo_" class="memuItem">
				<image src="@/static/icon/history.png" mode="aspectFill"></image>
				<text>浏览历史</text>
				<text class="memuItem-count">{{historyCount}}个</text>
			</navigator>
		</view>
		<view class="optionBox allBox">
			<!-- #ifdef MP -->
			<view v-if="showLoadListBtn" @click="goToUploadList" class="optionItem kefu">
				<button></button>
				<uni-icons type="list" size="50rpx"></uni-icons>
				<view>我的上传</view>
				<uni-icons type="forward" size="40rpx" color="#C3C3C3"></uni-icons>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view @click="goToUploadList" class="optionItem kefu">
				<button></button>
				<uni-icons type="list" size="50rpx"></uni-icons>
				<view>我的上传</view>
				<uni-icons type="forward" size="40rpx" color="#C3C3C3"></uni-icons>
			</view>
			<!-- #endif -->
			<view class="optionItem kefu">
				<!-- 区分平台 -->
				<!-- #ifdef APP-PLUS || WEB -->
				<button @click="H5Kefu"></button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="contact"></button>
				<!-- #endif -->
				<uni-icons type="headphones" size="50rpx"></uni-icons>
				<view>联系客服</view>
				<uni-icons type="forward" size="40rpx" color="#C3C3C3"></uni-icons>
			</view>
			<view @click="goToAboutus" class="optionItem">
				<uni-icons type="info" size="50rpx"></uni-icons>
				<view>关于我们</view>
				<uni-icons type="forward" size="40rpx" color="#C3C3C3"></uni-icons>
			</view>
			<view @click="goToSetting" class="optionItem lastItem">
				<uni-icons type="gear" size="50rpx"></uni-icons>
				<view>设置</view>
				<uni-icons type="forward" size="40rpx" color="#C3C3C3"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getIpApi
	} from '@/api/apis.js'
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		unique,
		avatarHandler,
		uniqueHistory
	} from '@/utils/common.js'
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	import {
		setTabBarBadge
	} from '@/utils/client.js'
	// import { useNotificationStore } from '@/stores/index.js'
	// const notificationStore = useNotificationStore()
	// const test = async () => {
	// 	await notificationStore.getNotification()
	// 	console.log(notificationStore.notifCount);
	// 	console.log('!!',uni.getStorageSync('notification'))
	// }
	// test()


	const hasLogin = computed(() => store.hasLogin)
	const userInfo = computed(() => store.userInfo)

	const clickUserInfo = () => {
		if (hasLogin.value) {
			uni.navigateTo({
				url: '/pages/login/userinfo/userinfo'
			})
		} else {
			uni.navigateTo({
				url: '/pages/login/login/login-withpwd'
				// url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'	
			})
		}
	}
	// ip
	// const ipInfo = ref({})
	// const getIpInfo = async () => {
	// 	const res = await getIpApi()
	// 	ipInfo.value = {...res.data, ip: res.ip}
	// }
	// getIpInfo()

	// 控制是否显示我的上传列表按钮
	const showLoadListBtn = ref(false)
	const db = uniCloud.database();
	const communityBarCollection = db.collection('wallpaper-communityBar');
	const getBtnStatus = async () => {
		const res = await communityBarCollection.where("_id == '685238c2712e765d19d7274d'").get({
			getOne: true
		})
		
		showLoadListBtn.value = res.result.data.status||true
	}

	const collectCount = ref(0)
	const historyCount = ref(0)
	const downloadCount = ref(0)
	onLoad(() => {
		// init()
		// console.log(userInfo.value);
		// console.log(hasLogin.value);
		getBtnStatus()
	})
	onShow(() => {
		setTabBarBadge()
		if (hasLogin.value) {
			mutations.updateUserInfoa()
		}

		init()
	})

	// 初始化方法
	const init = () => {
		// 收藏数
		let collectArr = [...uni.getStorageSync('collectInfo_img'), ...uni.getStorageSync('collectInfo_video')]
		collectCount.value = collectArr.length
		// 去重
		uniqueHistory()
		// 历史数 historyInfo_img  historyInfo_video
		historyCount.value = uni.getStorageSync('historyInfo_img').length + uni.getStorageSync('historyInfo_video').length
		// 下载历史
		downloadCount.value =  uni.getStorageSync('downloadInfo_img').length + uni.getStorageSync('downloadInfo_video').length
	}

	// h5客服按钮
	const H5Kefu = () => {
		// 个人不支持
		// window.open("weixin://dl/business/?appid=wx38810e50f0679ef2&path=/pages/index/index")
		// weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION*
		uni.showToast({
			title:"请在微信小程序中点击联系客服",
			icon:"none"
		})
		
	}

	// 跳转关于我们
	const goToAboutus = () => {
		uni.navigateTo({
			url: '/pages/aboutus/aboutus'
		})
	}
	// 跳转设置
	const goToSetting = () => {
		uni.navigateTo({
			url: '/pages/setting/setting'
		})
	}
	// 清除所有缓存
	const clearCache = () => {
		uni.showModal({
			title: '提示',
			content: '将清除当前账号所有数据，包括壁纸收藏、下载记录、浏览历史，是否确定？',
			confirmColor: 'red',
			success: (res) => {
				if (res.confirm) {
					uni.clearStorageSync()
					init()
					uni.showToast({
						title: '清除成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: '操作取消',
						icon: 'none',
					})
				}

			}
		})

		init()
	}


	const goToUploadList = () => {
		uni.navigateTo({
			url: '/pages/community/wallpaperList'
		})
	}
</script>

<style lang="scss" scoped>
	.allBox {
		width: 686rpx;
		margin: 0 auto;
		box-sizing: border-box;
		margin-bottom: 50rpx;
	}

	.avatarBox {
		height: 260rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 30rpx 40rpx 50rpx 40rpx;

		.userInfoBox {
			margin-left: 40rpx;
			flex: 1;

			.usernameText {
				color: #fff;
				width: 100%;
				font-size: 40rpx;
			}
		}

		image {
			width: 190rpx;
			height: 190rpx;
			// border: 1px solid $text-font-color-4;
			border-radius: 50%;
			background-color: #fff;
		}

		
	}

	.memuList {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.memuItem {
			width: 170rpx;
			height: 200rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 40rpx 20rpx 30rpx 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			box-shadow: #6c6c6c 10rpx 10rpx 20rpx -20rpx;
			font-size: 34rpx;
			// border: #e3e3e3 solid 1px;

			:deep() {
				.navigator-wrap {
					display: flex !important;
					flex-direction: column !important;
					align-items: center !important;
					justify-content: space-evenly !important;

				}
			}

			&:active {
				filter: brightness(0.9);
			}

			image {
				width: 90rpx;
				height: 90rpx;
				// border: #d8d8d8 dashed 1px;
				background-color: rgba(50, 219, 186, 0.1);
				border-radius: 3px;
				padding: 3px;
				margin-bottom: 20rpx;
			}

			.memuItem-count {
				color: $text-font-color-3;
				font-size: 24rpx;
			}
		}

	}

	.optionBox {
		border-radius: 30rpx;
		border: $text-font-color-4 solid 1px;
		overflow: hidden;

		.kefu {
			position: relative;

			button {
				position: absolute;
				opacity: 0;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}
		}

		.optionItem {
			width: 100%;
			height: 100rpx;
			border-bottom: $text-font-color-4 solid 1px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-size: 32rpx;

			&:active {
				background: #e6e6e6;
				opacity: 0.8;
			}

			view {
				flex: 1;
				margin-left: 30rpx;
			}
		}

	
		.lastItem{
			border-bottom: none!important;
		}
	}
</style>